<template>
  <div>
    <button @click="isShow=!isShow">切换</button>
  <!-- 必须使用v-if或者v-show进行条件渲染,或者使用路由进行切换,或者新增删除数据导致DOM的新增和删除
        - 在需要执行动画元素的外层添加transition组件 -->

        <transition>
          <div v-if="isShow" class="box"></div>
        </transition>
        
      </div>
</template>

<script>
export default {
name:"App",
data(){
  return{
    isShow:true
  }
}
}
</script >

<style scoped>

.box{
  width: 400px;
  height: 400px;
  background-color: green;
}

/* 元素进来之前的样式和元素离开之后的样式 */
.v-enter,
.v-leave-to{
opacity: 0;
}
/* 元素进来之后的样式和元素离开之前的样式 */
.v-enter-to,
.v-leave{
  opacity: 1;
}
.v-enter-active{

  transition: all 1s linear;
}
.v-leave-active{
  
  transition: all 1s linear;
}
</style>